<template>
  <div class="order">
    <div class="head">
      <van-nav-bar
        title="确认订单"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <div class="mid">
      <div class="qc">
        <div class="left">
          <van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
        </div>
        <div class="right">
          <p>立即取餐</p>
          <span>约30分钟后取餐</span>
        </div>
      </div>

      <div class="dz" @click="diZhi">
        <h6>收货人:{{lists.receiver}}</h6>
        <span>收货市区县:{{lists.regions}}</span><br>
        <p>收货地址:{{lists.regions+lists.address}}</p>
      </div>

      <div class="xinxi" v-for="v in list" :key="v.id">
        <div class="ding">
          <p>订单信息</p>
        </div>
        <div class="coff">
          <div class="coffl">
            <h6>{{v.product.name}}</h6>
            <span>{{v.product.descriptions}}</span>
          </div>
          <p class="p1">x{{v.quantity}}</p>
          <p class="p2" :ref="'price-'+v._id">¥{{v.product.price*v.quantity}}</p>
        </div>
      </div>

      <div class="qc1">
        <div class="right1">
          <p>使用优惠</p>
        </div>
        <div class="left1">
          <van-switch v-model="checked" size="24px" />
        </div>
    </div>

      <div class="qian">
        <van-cell-group>
          <van-cell title="使用咖啡钱包" value="1个可用>" title-style="color:skyblue" value-class="oran"/>
        </van-cell-group>
      </div>

      <div class="qian">
        <van-cell-group>
          <van-cell title="使用优惠卷" value="6个可用>" title-style="color:skyblue" value-class="oran"/>
        </van-cell-group>
      </div>

      <div class="qian">
        <van-cell-group>
          <van-cell title="支付方式" value="支付宝支付>"/>
        </van-cell-group>
      </div>

    </div>

  <div class="foot">
    <div class="b">
        <div class="left">
          <span class="l1">应付合计</span>
          <span class="l2">¥{{sum}}</span>
        </div>
        <div class="right">
          <span class="r3" @click="pay()">去支付</span>
        </div>
    </div>
  </div>

  </div>
</template>
<script>
import { getaddress } from '../api/address'
export default {
  data() {
    return {
      checked: true,
      list: [],
      // lists:[],
      sum: 0,
      id: '5df1a1b7ba2b9662e6532eb4',
      lists:[]
    }
  },
  created(){
      this.add();
      if(localStorage.getItem('selectedCart')){
      this.list = JSON.parse(localStorage.getItem('selectedCart'))
      //计算总价
      this.list.forEach(item=>{
        this.sum += (item.product.price*item.quantity);
        // this.lists.push({
        //     quantity: item.quantity,
        //     product: item.product._id,
        //     price: item.product.price
        // })
      })
    }
  },
  methods: {

    async add(){
      if(this.$route.query.id){
        this.id = this.$route.query.id;
      }
      console.log(this.id);
      const res = await getaddress(this.id);
      this.lists = res.data;
      console.log(res);
    },
    onClickLeft() {
      this.$router.push({name:'Cart'});
    },
    diZhi() {
      this.$router.push({name:'DiZhi'})
    },
  async pay() {
    this.$router.push({name:'Mima',query:{id:this.id}});
    },
    getsum(id) {
      console.log(this.$refs["'price-'+id"]);
    },
  }

}
</script>
<style scoped>
.order{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
 .head{
  height: 50px;
}
.mid{
  flex: 1;
  overflow: auto;
  background: ghostwhite;
}
.foot{
  height: 60px;

}
.b{
  height: 60px;
  display: flex;
}
.b .left{
  width: 70%;
}
.b .left .l1{
  margin-left: 10px;
  line-height: 60px;
}
.b .left .l2{
  font-weight: 600;
  font-size: 23px;
  margin-left: 8px;
  color: red;
}
.b .right{
  width: 30%;
  background:skyblue;
}
.b .right .r3{
  line-height: 60px;
  margin-left: 30px;
  color: white;
}
.qc{
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
   border-bottom: solid 1px gainsboro;
  background: white;
  align-content: center;
  border-bottom: solid 1px ghostwhite;
}
.qc p{
  margin: 0;
  color: rgba(56, 56, 56, 1);
	font-size: 13px;
	line-height: 150%;
	text-align: left;
	font-weight: bold;
}
.qc span{
  color: rgba(136, 175, 213, 1);
  font-size: 12px;
}
.dz p{
  margin: 0;
  color: rgba(56, 56, 56, 1);
	font-size: 13px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dz span{
  color: rgba(56, 56, 56, 1);
  font-size: 15px;
}
h6{
  margin: 0;
  color: rgba(56, 56, 56, 1);
	font-size: 16px;
}
.dz{
  padding: 8px 15px 4px;
  height: 68px;
  background: white;
  border-bottom:solid 1px gainsboro;
}
.ding{
  height: 25px;
  padding: 10px 16px 0px;
  display: flex;
  justify-content: space-between;
}
.ding p:nth-child(2){
  color: red;
}
.ding p{
  margin: 0px;
  font-size: 14px;
}
.xinxi{
  height: 94px;
  background: white;
  border-bottom: solid 1px gainsboro;
}
.coff p{
  margin: 0;
  font-size: 14px;
}
.coffl span{
  font-size: 12px;
  color: gray;
}
.coffl h6{
  font-size: 16px;
}
.coff{
  display: flex;
  justify-content: space-between;
  height: 60px;
  padding: 0 16px;
}
.coff .p1,.coff .p2{
  line-height: 60px;
}
.coff .p1{
  color: gray;
}
.coff .coffl{
  margin-top: 6px;
}
.qc1{
  height: 60px;
  padding: 5px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  margin-top: 10px;
}
.qc1 p{
  margin: 0;
  color: rgba(56, 56, 56, 1);
	font-size: 13px;
	line-height: 150%;
	text-align: left;
	font-weight: bold;
}
.oran{
  color: orange;
}
.p2{
  color: red;
}
</style>
